
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Awesome go-echarts</title>
    <script src="http://127.0.0.1:8083/assets/echarts.min.js"></script>
    <link href="http://127.0.0.1:8083/assets/bulma.min.css" rel="stylesheet">
</head>

<body>
<div class="select" style="margin-right:10px; margin-top:10px; position:fixed; right:10px;">
    <select onchange="window.location.href=this.options[this.selectedIndex].value">
        <option value="http://127.0.0.1:8080/parallel">Parallel-(平行坐标系)</option>
        <option value="http://127.0.0.1:8080/bar3D">Bar3D-(3D 柱状图)</option>
        <option value="http://127.0.0.1:8080/boxPlot">BoxPlot-(箱线图)</option>
        <option value="http://127.0.0.1:8080/effectScatter">EffectScatter-(动态散点图)</option>
        <option value="http://127.0.0.1:8080/funnel">Funnel-(漏斗图)</option>
        <option value="http://127.0.0.1:8080/gauge">Gauge-仪表盘</option>
        <option value="http://127.0.0.1:8080/geo">Geo-地理坐标系</option>
        <option value="http://127.0.0.1:8080/graph">Graph-关系图</option>
        <option value="http://127.0.0.1:8080/heatMap">HeatMap-热力图</option>
        <option value="http://127.0.0.1:8080/kline">Kline-K 线图</option>
        <option value="http://127.0.0.1:8080/line">Line-(折线图)</option>
        <option value="http://127.0.0.1:8080/line3D">Line3D-(3D 折线图)</option>
        <option value="http://127.0.0.1:8080/liquid">Liquid-(水球图)</option>
        <option value="http://127.0.0.1:8080/map">Map-(地图)</option>
        <option value="http://127.0.0.1:8080/overlap">Overlap-(重叠图)</option>
        <option value="http://127.0.0.1:8080/bar">Bar-(柱状图)</option>
        <option value="http://127.0.0.1:8080/pie">Pie-(饼图)</option>
        <option value="http://127.0.0.1:8080/radar">Radar-(雷达图)</option>
        <option value="http://127.0.0.1:8080/sankey">Sankey-(桑基图)</option>
        <option value="http://127.0.0.1:8080/scatter">Scatter-(散点图)</option>
        <option value="http://127.0.0.1:8080/scatter3D">Scatter-(3D 散点图)</option>
        <option value="http://127.0.0.1:8080/surface3D">Surface3D-(3D 曲面图)</option>
        <option value="http://127.0.0.1:8080/themeRiver">ThemeRiver-(主题河流图)</option>
        <option value="http://127.0.0.1:8080/wordCloud">WordCloud-(词云图)</option>
        <option value="http://127.0.0.1:8080/page">Page-(顺序多图)</option>
    </select></div>

    
<div class="container">
    <div class="item" id="lygXGaDrKLNX"
         style="width:900px;height:500px;"></div>
</div>
<script type="text/javascript">
    "use strict";
    let myChart_lygXGaDrKLNX = echarts.init(document.getElementById('lygXGaDrKLNX'), "white");
    let option_lygXGaDrKLNX = {
        title: {"text":"Parallel-示例图",},
        tooltip: {},
        legend: {},
        parallel: {},
        parallelAxis: [{"name":"日期","max":31,"inverse":true,"nameLocation":"start"},{"dim":1,"name":"AQI"},{"dim":2,"name":"PM2.5"},{"dim":3,"name":"PM10"},{"dim":4,"name":"CO"},{"dim":5,"name":"NO2"},{"dim":6,"name":"SO2"},{"dim":7,"name":"等级","type":"category","data":["优","良","轻度污染","中度污染","重度污染","严重污染"]}],
        series: [
        {"name":"北京","type":"parallel","data":[[1,55,9,56,0.46,18,6,"良"],[2,25,11,21,0.65,34,9,"优"],[3,56,7,63,0.3,14,5,"良"],[4,33,7,29,0.33,16,6,"优"],[5,42,24,44,0.76,40,16,"优"],[6,82,58,90,1.77,68,33,"良"],[7,74,49,77,1.46,48,27,"良"],[8,78,55,80,1.29,59,29,"良"],[9,267,216,280,4.8,108,64,"重度污染"],[10,185,127,216,2.52,61,27,"中度污染"],[11,39,19,38,0.57,31,15,"优"],[12,41,11,40,0.43,21,7,"优"],[13,64,38,74,1.04,46,22,"良"],[14,108,79,120,1.7,75,41,"轻度污染"],[15,108,63,116,1.48,44,26,"轻度污染"],[16,33,6,29,0.34,13,5,"优"],[17,94,66,110,1.54,62,31,"良"],[18,186,142,192,3.88,93,79,"中度污染"],[19,57,31,54,0.96,32,14,"良"],[20,22,8,17,0.48,23,10,"优"],[21,39,15,36,0.61,29,13,"优"]],"label":{"show":false},"emphasis":{"label":{"show":false},},"markLine":{"label":{"show":false}},"markPoint":{"label":{"show":false}},},
        ],
        color: ["#c23531","#2f4554","#61a0a8","#d48265","#91c7ae","#749f83","#ca8622","#bda29a","#6e7074","#546570","#c4ccd3"],
    };
    myChart_lygXGaDrKLNX.setOption(option_lygXGaDrKLNX);
</script>

    <br/>
    
<div class="container">
    <div class="item" id="ffvNkqudZgAU"
         style="width:900px;height:500px;"></div>
</div>
<script type="text/javascript">
    "use strict";
    let myChart_ffvNkqudZgAU = echarts.init(document.getElementById('ffvNkqudZgAU'), "white");
    let option_ffvNkqudZgAU = {
        title: {"text":"Parallel-ParallelComponent",},
        tooltip: {},
        legend: {},
        parallel: {"left":"15%","top":"20%","right":"13%","bottom":"10%"},
        parallelAxis: [{"name":"日期","max":31,"inverse":true,"nameLocation":"start"},{"dim":1,"name":"AQI"},{"dim":2,"name":"PM2.5"},{"dim":3,"name":"PM10"},{"dim":4,"name":"CO"},{"dim":5,"name":"NO2"},{"dim":6,"name":"SO2"},{"dim":7,"name":"等级","type":"category","data":["优","良","轻度污染","中度污染","重度污染","严重污染"]}],
        series: [
        {"name":"北京","type":"parallel","data":[[1,55,9,56,0.46,18,6,"良"],[2,25,11,21,0.65,34,9,"优"],[3,56,7,63,0.3,14,5,"良"],[4,33,7,29,0.33,16,6,"优"],[5,42,24,44,0.76,40,16,"优"],[6,82,58,90,1.77,68,33,"良"],[7,74,49,77,1.46,48,27,"良"],[8,78,55,80,1.29,59,29,"良"],[9,267,216,280,4.8,108,64,"重度污染"],[10,185,127,216,2.52,61,27,"中度污染"],[11,39,19,38,0.57,31,15,"优"],[12,41,11,40,0.43,21,7,"优"],[13,64,38,74,1.04,46,22,"良"],[14,108,79,120,1.7,75,41,"轻度污染"],[15,108,63,116,1.48,44,26,"轻度污染"],[16,33,6,29,0.34,13,5,"优"],[17,94,66,110,1.54,62,31,"良"],[18,186,142,192,3.88,93,79,"中度污染"],[19,57,31,54,0.96,32,14,"良"],[20,22,8,17,0.48,23,10,"优"],[21,39,15,36,0.61,29,13,"优"]],"label":{"show":false},"emphasis":{"label":{"show":false},},"markLine":{"label":{"show":false}},"markPoint":{"label":{"show":false}},},
        ],
        color: ["#c23531","#2f4554","#61a0a8","#d48265","#91c7ae","#749f83","#ca8622","#bda29a","#6e7074","#546570","#c4ccd3"],
    };
    myChart_ffvNkqudZgAU.setOption(option_ffvNkqudZgAU);
</script>

    <br/>
    
<div class="container">
    <div class="item" id="VhPQzbXJAfsN"
         style="width:900px;height:500px;"></div>
</div>
<script type="text/javascript">
    "use strict";
    let myChart_VhPQzbXJAfsN = echarts.init(document.getElementById('VhPQzbXJAfsN'), "white");
    let option_VhPQzbXJAfsN = {
        title: {"text":"Parallel-多 Series",},
        tooltip: {},
        legend: {},
        parallel: {},
        parallelAxis: [{"name":"日期","max":31,"inverse":true,"nameLocation":"start"},{"dim":1,"name":"AQI"},{"dim":2,"name":"PM2.5"},{"dim":3,"name":"PM10"},{"dim":4,"name":"CO"},{"dim":5,"name":"NO2"},{"dim":6,"name":"SO2"},{"dim":7,"name":"等级","type":"category","data":["优","良","轻度污染","中度污染","重度污染","严重污染"]}],
        series: [
        {"name":"北京","type":"parallel","data":[[1,55,9,56,0.46,18,6,"良"],[2,25,11,21,0.65,34,9,"优"],[3,56,7,63,0.3,14,5,"良"],[4,33,7,29,0.33,16,6,"优"],[5,42,24,44,0.76,40,16,"优"],[6,82,58,90,1.77,68,33,"良"],[7,74,49,77,1.46,48,27,"良"],[8,78,55,80,1.29,59,29,"良"],[9,267,216,280,4.8,108,64,"重度污染"],[10,185,127,216,2.52,61,27,"中度污染"],[11,39,19,38,0.57,31,15,"优"],[12,41,11,40,0.43,21,7,"优"],[13,64,38,74,1.04,46,22,"良"],[14,108,79,120,1.7,75,41,"轻度污染"],[15,108,63,116,1.48,44,26,"轻度污染"],[16,33,6,29,0.34,13,5,"优"],[17,94,66,110,1.54,62,31,"良"],[18,186,142,192,3.88,93,79,"中度污染"],[19,57,31,54,0.96,32,14,"良"],[20,22,8,17,0.48,23,10,"优"],[21,39,15,36,0.61,29,13,"优"]],"label":{"show":false},"emphasis":{"label":{"show":false},},"markLine":{"label":{"show":false}},"markPoint":{"label":{"show":false}},},
        {"name":"广州","type":"parallel","data":[[1,26,37,27,1.163,27,13,"优"],[2,85,62,71,1.195,60,8,"良"],[3,78,38,74,1.363,37,7,"良"],[4,21,21,36,0.634,40,9,"优"],[5,41,42,46,0.915,81,13,"优"],[6,56,52,69,1.067,92,16,"良"],[7,64,30,28,0.924,51,2,"良"],[8,55,48,74,1.236,75,26,"良"],[9,76,85,113,1.237,114,27,"良"],[10,91,81,104,1.041,56,40,"良"],[11,84,39,60,0.964,25,11,"良"],[12,64,51,101,0.862,58,23,"良"],[13,70,69,120,1.198,65,36,"良"],[14,77,105,178,2.549,64,16,"良"],[15,109,68,87,0.996,74,29,"轻度污染"],[16,73,68,97,0.905,51,34,"良"],[17,54,27,47,0.592,53,12,"良"],[18,51,61,97,0.811,65,19,"良"],[19,91,71,121,1.374,43,18,"良"],[20,73,102,182,2.787,44,19,"良"],[21,73,50,76,0.717,31,20,"良"]],"label":{"show":false},"emphasis":{"label":{"show":false},},"markLine":{"label":{"show":false}},"markPoint":{"label":{"show":false}},},
        {"name":"上海","type":"parallel","data":[[1,91,45,125,0.82,34,23,"良"],[2,65,27,78,0.86,45,29,"良"],[3,83,60,84,1.09,73,27,"良"],[4,109,81,121,1.28,68,51,"轻度污染"],[5,106,77,114,1.07,55,51,"轻度污染"],[6,109,81,121,1.28,68,51,"轻度污染"],[7,106,77,114,1.07,55,51,"轻度污染"],[8,89,65,78,0.86,51,26,"良"],[9,53,33,47,0.64,50,17,"良"],[10,80,55,80,1.01,75,24,"良"],[11,117,81,124,1.03,45,24,"轻度污染"],[12,99,71,142,1.1,62,42,"良"],[13,95,69,130,1.28,74,50,"良"],[14,116,87,131,1.47,84,40,"轻度污染"],[15,108,80,121,1.3,85,37,"轻度污染"],[16,134,83,167,1.16,57,43,"轻度污染"],[17,79,43,107,1.05,59,37,"良"],[18,71,46,89,0.86,64,25,"良"],[19,97,71,113,1.17,88,31,"良"],[20,84,57,91,0.85,55,31,"良"],[21,87,63,101,0.9,56,41,"良"]],"label":{"show":false},"emphasis":{"label":{"show":false},},"markLine":{"label":{"show":false}},"markPoint":{"label":{"show":false}},},
        ],
        color: ["#c23531","#2f4554","#61a0a8","#d48265","#91c7ae","#749f83","#ca8622","#bda29a","#6e7074","#546570","#c4ccd3"],
    };
    myChart_VhPQzbXJAfsN.setOption(option_VhPQzbXJAfsN);
</script>

    <br/>
<style>
    .container {display: flex;justify-content: center;align-items: center;}
    .item {margin: auto;}
</style>
</body>
</html>
